.container {
  width: 100%;
  height: 100%;
  background: #02024e;

  &-header {
    width: 19.17rem;
    height: 0.92rem;
    background-image: url("~@/assets/daping/header-bg.png");
    background-size: 100% 100%;
    overflow: hidden;

    &-title {
      font-size: 0.34rem;
      font-weight: bold;
      background: linear-gradient(180deg, #f5fdff, #009aff 100%);
      -webkit-background-clip: text;
      color: transparent;
      white-space: nowrap;
    }
  }

  &-col {
    box-sizing: border-box;
    margin: 0.1rem;

    &-echarts-box {
      position: relative;
      height: calc((100vh - 1.12rem) / 3);
      background-image: url("~@/assets/daping/echarts-bg.png");
      background-size: 100% 100%;

      &-text, &-bottom {
        display: inline-block;
        position: absolute; /* 使用绝对定位 */
        top: 0; /* 固定在父容器的左上角 */
        left: 0; /* 固定在父容器的左上角 */
        padding: 7.5% 0 0 9.5%;
        width: 3rem;
        height: 0.75rem;
        overflow: hidden;
        font-size: 0.18rem;
        font-weight: bold;
        background: linear-gradient(180deg, #f5fdff, #009aff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent !important;
        white-space: nowrap;
        font-style: italic; /* 设置为斜体 */
      }

      &-bottom {
        padding: 4% 0 0 9%;
      }

      &-tu {
        position: absolute;
        width: 97%;
        margin: 0.68rem 0 0 0.1rem;
        height: calc(((100vh - 1.12rem) / 3) - 0.72rem);
        overflow: hidden;

        &-row{
          flex: 1;
          width: 100%
        }

        &-zcText {
          display: inline-block;
          font-size: 0.18rem;
          font-weight: bold;
          margin: 0.2rem 0 0 -0.2rem;
          background: linear-gradient(180deg,#ffffff 17%, #24e765 100%);
          -webkit-background-clip: text;
          color: transparent;
          white-space: nowrap;
        }
        &-ycText {
          display: inline-block;
          font-size: 0.18rem;
          font-weight: bold;
          margin: 0.2rem 0 0 -0.2rem;
          background: linear-gradient(180deg, #ffffff 17%, #808080 100%);
          -webkit-background-clip: text;
          color: transparent;
          white-space: nowrap;
        }

        &-imgBox {
          width: 0.6rem;
          height: 0.6rem;
          margin-top: 0.2rem;
          &-img{
            width: 100%;
            height:100%;
          }
        }
      }
    }
  }

  &-col-top {
    height: 1.4rem;
    background-image: url("~@/assets/daping/show-data.png");
    background-size: 100% 100%;

    &-item{
      display: flex;
      flex-direction: column;
      text-align: center;
      height: 100%;
      &-cjRow,&-yjRow,&-gyRow{
        font-weight: bold;
        font-size: 0.26rem;
        height: 50%;
        text-align: center;
        background: linear-gradient(180deg, #f5fdff, #009aff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent !important;
        white-space: nowrap;
      }
      &-yjRow{
        background: linear-gradient(180deg, #ffffff, #ff0000 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent !important;
        white-space: nowrap;
      }
      &-gyRow{
        background: linear-gradient(180deg,#ffffff 17%, #24e765 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent !important;
        white-space: nowrap;
      }
    }
  }

  &-col-center {
    margin-top: 0.2rem;
    height: calc(100vh - 2.93rem - (100vh - 1.12rem) / 3);
    background-image: url("~@/assets/daping/show-data.png");
    background-size: 100% 100%;
  }
}

.scroll_box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  text-align: center;
  color: #87CEFA;

  &_row {
    height: 0.3rem;
    line-height: 0.3rem;
    font-size: 0.14rem;
  }
}
